<template>
    <header>
      <label class="allbox"><input type="checkbox" @change="onChange($event)" :checked="isAll"></label>
      <label class="textbox"><input autofocus type="text" placeholder="What needs to be done?" v-model="title" @keyup.enter="enterHandler"></label>
    </header>
</template>
<script>
export default {
  name:'TodoHeader',
  props:['addTodo','setCheckAll','list'],
  data:function () {
    return {
      title:'',
    }
  },
  methods:{
    enterHandler:function () {
      if(!this.title) return;
      const times = +new Date;
      const str = 'abcdefghijklnmobqistuvwxyz';
      const r1 = parseInt(Math.random() * str.length);
      const r2 = parseInt(Math.random() * str.length);
      const r3 = parseInt(Math.random() * str.length);
      const r4 = parseInt(Math.random() * str.length);
      const r5 = parseInt(Math.random() * str.length);

      const ran = `${times}${str[r1]}${str[r2]}${str[r3]}${str[r4]}${str[r5]}`;
      
      const data = {
        id:ran,
        title:this.title,
        isComplete:false,
        status:'all'
      }

      this.addTodo(data);
      this.title = '';
    },
    onChange:function (e) {
      this.setCheckAll(e.target.checked);
    },
  },
  computed:{
    isAll:function () {
      return this.list.length === this.list.filter(item => item.isComplete).length && this.list.filter(item => item.isComplete).length > 0
    }
  }

  
  

 
}
</script>
<style scoped>
  /* 头部header */
  header {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #999;
    padding: 0 20px;
    margin-bottom: 15px;
  }
  header > .allbox {
    width: 80px;
  }
  header > .allbox > input {
    width: 25px;
    height: 25px;

  }
  header > .textbox {
    flex: 1;
  }
  header > .textbox > input {
    box-sizing: border-box;
    height: 40px;
    width: 100%;
    padding: 0 30px 0 0;
    outline: none;
    border: 0;
    box-shadow: inset 0 -2px 1px rgb(0 0 0 / 3%);
    font-size: 24px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
  }
</style>